<template>
  <div class="detailPageCss">
    <div class="titleCss">.放射卫生人员证管理列表</div>
    <div class="bodyCss">
      <el-form ref="form" :model="formData" label-width="120px">
          <el-form-item label="姓名">
            <el-input v-model="formData.data1" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="formData.data2" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="formData.data3" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="职业照射种类代码">
            <el-select clearable  v-model="formData.data4" placeholder="请选择" style="width:100%;">
              <el-option
                v-for="item in data4Options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工作岗位">
            <el-select clearable v-model="formData.data5" placeholder="请选择" style="width:100%;">
              <el-option
                v-for="item in data5Options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <div class="formBtnCss">
            <el-button type="primary" @click="searchBtn">查询</el-button>
            <el-button @click="resetBtn">重置</el-button>
          </div>
      </el-form>
      <div class="tableCss">
        <el-table
           v-loading="loading"
          max-height="500"
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="55"
            align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="人员名称"
            min-width="80">
          </el-table-column>
          <el-table-column
            prop="identityNumber"
            label="身份证号"
            min-width="200">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="联系电话"
            min-width="120">
          </el-table-column>
          <el-table-column
            prop="enterpriseName"
            label="工作单位"
            min-width="150">
          </el-table-column>

          <el-table-column  label="工作岗位" min-width="150">
            <template #default="scope">
              {{selectDictLabel(dict.type.radiation_enterprise_job,scope.row.job)}}
<!--              {{-->
<!--                (dict.type.radiation_enterprise_job || []).find(item => item.value === scope.row.job)?.label || scope.row.job-->
<!--              }}-->
            </template>
          </el-table-column>
          <el-table-column
            prop="irradiationType"
            label="职业照射种类代码"
            min-width="150">
          </el-table-column>
          <el-table-column
            prop="expireTime"
            label="放射工作人员证有效期"
            min-width="150">
          </el-table-column>
          <el-table-column
            prop="healthCheckResult"
            label="检查结果"
            min-width="100">
            <template #default="scope">
              {{typeof scope.row.healthCheckResult==='number'?data8Map[scope.row.healthCheckResult]:scope.row.healthCheckResult }}
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="300">
            <template #default="scope">
              <el-button @click="lookDetailBtn(scope.row,0)" type="text" size="small">查看人员剂量检测报告</el-button>
              <el-button @click="lookDetailBtn(scope.row,1)" type="text" size="small">查看职业健康检查数据</el-button>
              <el-button @click="lookDetailBtn(scope.row,2)" type="text" size="small">企业体检结果告知书</el-button>
              <el-button @click="lookDetailBtn(scope.row,3)" type="text" size="small"
              v-if="typeof scope.row.healthCheckResult==='number'?scope.row.healthCheckResult!==2:scope.row.healthCheckResult!=='正常'"
              >查看调岗材料</el-button>
              <el-button @click="lookDetailBtn(scope.row,4)" type="text" size="small"
              v-if="typeof scope.row.healthCheckResult==='number'?scope.row.healthCheckResult==1:scope.row.healthCheckResult=='疑似职业病'"
              >查看疑似职业病报告</el-button>
              <el-button @click="lookDetailBtn(scope.row,5)" type="text" size="small"
              v-if="typeof scope.row.healthCheckResult==='number'?scope.row.healthCheckResult==1:scope.row.healthCheckResult=='疑似职业病'"
              >查看诊断委托材料</el-button>
              <el-button @click="lookDetailBtn(scope.row,6)" type="text" size="small">查看放射工作人员证</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top:10px;text-align: right;"
          background
          :pageSize="pageSize"
          layout="prev, pager, next"
          :page-sizes="[10, 20, 50]"
          :total="total"
          @sizeChange="handleSizeChange"
          @currentChange="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
    <div class="bottomBtnCss">
      <el-button @click="goBackBtn">返回</el-button>
    </div>
  </div>
</template>

<script>
import { getSelectOptionsFun , getCurrentDay } from '@/utils/business.js'
import { getStaffList } from '@/api/zhangping/personDetail'
import dict from '../../../../../utils/dict'
import { selectDictLabel } from '../../../../../utils/ruoyi'

export default {
  dicts:['radiation_enterprise_job' ],
  data(){
    return{
      loading:false,
      pageNum:1,
      formData:{
        data1:null,
        data2:null,
        data3:null,
        data4:null,
        data5:null,
      },
      data4Options:[],
      data5Options:[],
      tableData:[],
      pageSize:10,
      total:10,
      data5Map:{
        0:'胃肠造影',
        1:'普通摄影',
        2:'透视',
        3:'乳腺摄影',
        4:'床边摄影',
        5:'CT',
        6:'C型臂',
      },
      data8Map:{
        0:'职业禁忌',
        1:'疑似职业病',
        2:'正常',
      },
    }
  },
  mounted(){
    // this.data4Options = getSelectOptionsFun()
    // this.data5Options = getSelectOptionsFun()
    // this.getList()
    this.searchBtn()

  },
  methods:{
    selectDictLabel,
    dict,
    lookDetailBtn(row , type){
      const typeMap = {
        0:'doseReportDetail',
        1:'healthReportDetail',
        2:'companyHealthResultDetail',
        3:'transferPositionDetail',
        4:'suspectedDiseaseDetail',
        5:'entrustDetail',
        6:'personCardDetail',
      }
      const obj = {
        path: `/radiationHygiene/test/personDetail/${typeMap[type]}`,
        query: {
          id: '111',
          info: row,
        }
      }
      this.$router.push(obj);
    },
    getList(){
      const random = Math.floor( Math.random() * 50 ) + 4
      let list = []
      for( let i=0;i<random;i++){
        const random1 = Math.floor( Math.random() * 7 )
        const random2 = Math.floor( Math.random() * 2 )
        const random3 = Math.floor( Math.random() * 3 )
        list.push({
          data1: '张三',
          data2: '56115154515145161',
          data3: '18888888888',
          data4:'【测试数据】漳平市xxxxxx医院',
          data5: random1,
          data6: '2A',
          data7: getCurrentDay() + ( random2 === 0 ? '(过期)' : '' ),
          data8: random3,
        })
      }
      this.tableData = list
    },
    handleCurrentChange(){

    },
    handleSizeChange(val){
      this.pageSize = val
      this.searchBtn()
      console.log(`每页 ${val} 条`)

    },
    resetBtn(){
      this.formData={
        data1:null,
          data2:null,
          data3:null,
          data4:null,
          data5:null,
      }
    },
    searchBtn(){
      this.loading = true
      console.log(this.$route.query)
      getStaffList({
        creditCode:this.$route.query.id,
        pageNum:"1",
        pageSize:this.pageSize,
        name:this.formData.data1,
        identityNumber:this.formData.data2,
        phone:this.formData.data3,
        job:this.formData.data5,
        irradiationType:this.formData.data4,
      }).then(res=>{
        this.loading = false
        if (res.code===200){
          let data4OptionsTemp =[]
          let data5OptionsTemp =[]
          for (let i = 0; i < res.rows.length; i++) {
            if (res.rows[i].irradiationType&&!data4OptionsTemp.includes(res.rows[i].irradiationType)){
              data4OptionsTemp.push(res.rows[i].irradiationType)
            }
            if (res.rows[i].job&&!data5OptionsTemp.includes(res.rows[i].job)) {
              data5OptionsTemp.push(res.rows[i].job)
            }

          }
          this.data4Options=[]
          this.data5Options=[]
          for (let i = 0; i < data4OptionsTemp.length; i++) {
            let item = {
              value: data4OptionsTemp[i],
              label: data4OptionsTemp[i]
            }
            this.data4Options.push(item)
          }
          for (let i = 0; i < data5OptionsTemp.length; i++) {
            let item = {
              value: data5OptionsTemp[i],
              label: data5OptionsTemp[i]
            }
            this.data5Options.push(item)
          }
          this.total = res.total
          this.tableData = res.rows
        }
      })
    },
    goBackBtn(){
      this.$router.back()
    },
  },
}
</script>

<style lang="scss" scoped>
.detailPageCss{
  overflow: hidden;
  position: relative;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  height: calc( 100vh - 66px - 40px);
  display: flex;
  flex-direction: column;
  .titleCss{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
  }
  .bodyCss{
    margin-top: 20px;
    width: calc( 100% - 20px);
    margin-left: 10px;
    height: calc( 100% - 90px);
    overflow-y: auto;
    .el-form{
      display: flex;
      flex-wrap: wrap;
      border-bottom: 1px solid #f2f2f2;
      .formBtnCss{
        margin-left: 20px;
        text-align: center;
      }
    }
  }
  .bottomBtnCss{
    margin-top: auto;
    text-align: right;
  }
}
::v-deep .el-form-item__content{
  width: 200px;
}
</style>
